<template>
	<!-- 首页头部搜索组件 -->
	<view class="header" :style="'height:'+customBar+'px;'" :class="theme">
		<view class="home-nav" :style="computedStyle" :class="theme">
			<view class="nav-content">
				<!-- <view class="title">
					{{title}}
				</view> -->
				<view class="nav-content-left">
					<image src="https://zsw-bimface-res.izsw.net/img/bim-community/gift-bag.png" mode=""></image>
				</view>
				<view class="search" @tap="toSearch" hover-class="hover">
					<uni-easyinput prefixIcon="search" placeholder="请输入关键词" ></uni-easyinput>
					<!-- <image src="@/static/search.png" class="search-icon"></image> -->
					<view class="search-btn">
						搜索
					</view> 
				</view>
				<view class="nav-content-right" @click='toggleVisibility'>
					<image src="https://zsw-bimface-res.izsw.net/img/bim-community/MENU.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HomeNav",
		props: {
			current: Number,
			theme: {
				type: String,
				default () {
					return 'black'
				}
			},
			bgColor: {
				type: String,
				default () {
					return 'white'
				}
			},
			title: {
				type: String
			},
			searchType: {
				type: String,
				default: () => {
					return 'box'
				}
			}
		},
		data() {
			return {
				tabs: ["全部", "新品", "推荐"],
				customBar: 64,
				contentStyle: ""
			}
		},
		computed: {
			deviceInfo() {
				return this.$store.getters.deviceInfo
			},
			computedStyle() {
				let bakgroundColor =  `background: transparent;`;
				return this.contentStyle + bakgroundColor
			}
		},
		created() {
			// this.customBar = this.deviceInfo.customBar
			let navheight = this.deviceInfo.customBar? this.deviceInfo.customBar : 38;
			this.contentStyle = `height:${navheight}px;padding-top:${this.deviceInfo.statusBar}px;`;
		},
		methods: {
			toggleVisibility(){
				this.$emit('isVisible');
			},
			// 首页点击搜索后跳转到搜索页
			toSearch() {
				// return
				uni.navigateTo({
					url: '/pages/search/index?type=' + this.searchType
				})
			},
			handleClick(e) {
				this.$emit("change", e.currentTarget.dataset.current)
			}
		}
	}
</script>

<style lang="scss">
	.header {
		position: fixed;
		z-index: 1000;
	}

	.home-nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		display: flex;
		// background: rgba(0, 0, 0, 0.1);
		z-index: 10;
		transition: background 0.2s;
		-webkit-transition: background 0.2s;
		margin-top: 37rpx;
		.nav-content {
			height: 68rpx;
			width: 100%;
			display: flex;
			justify-content: space-evenly;
			
			.nav-content-left {
				width: 60rpx;
				display: flex;
				align-items: center;
				image {
					width: 100%;
					height: 90%;
				}
			}

			.search{
				width: 60%;
				height: 52rpx;
				font-size: 26rpx;
				position: relative;
				.search-btn {
					width: 90rpx;
					height: 50rpx;
					color: white;
					text-align: center;
					line-height: 50rpx;
					background-color: #6C43FF;
					border-radius: 8rpx;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}
			}

			.nav-content-right {
				width: 60rpx;
				display: flex;
				align-items: center;
				image {
					width: 100%;
					height: 90%;
				}
			}
		}
	}
</style>